<template>
  <div>
    <a-page-header
      style="border: 1px solid rgb(235, 237, 240); margin-bottom:14px"
      title="SKU列表"
    >
      <template slot="extra">
        <a-button type="primary" @click="handleCreate" style="float:left;"
          ><a-icon type="plus" /> 新建</a-button
        >
        <a-form style="float:left">
          <a-input-search
            placeholder="SKU名称 或 SKU编码"
            style="width: 200px"
            @search="onSearch"
          />
        </a-form>
      </template>
    </a-page-header>

    <a-table
      :columns="columns"
      :dataSource="data"
      :rowKey="record => record.id"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
    >
      <span slot="volume" slot-scope="text, record"
        >{{ record.length }} x {{ record.width }} x {{ record.height }}</span
      >
      <span slot="wrapping" slot-scope="text, record">
        <span v-if="record.wrapping == '1'">硬包装</span>
        <span v-if="record.wrapping == '2'">软包装</span>
      </span>

      <span slot="specification" slot-scope="text">
        <span v-if="text">{{ text.substring(0, 20) + "..." }}</span>
        <span v-else></span>
      </span>

      <span slot="action" slot-scope="text, record">
        <a
          href="javascript:;"
          @click="handleShow(record.id)"
          style="color: #8a6d3b"
          ><a-icon type="eye" />查看</a
        >
        |
        <a-popconfirm
          v-if="data.length"
          title="确认要删除?"
          cancelText="取消"
          okText="确认"
          @confirm="() => handleDelete(record.id)"
        >
          <a href="javascript:;" style="color: #a94442"
            ><a-icon type="delete" />删除</a
          >
        </a-popconfirm>
      </span>
    </a-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: "WPC",
          dataIndex: "track_code",
          key: "track_code",
          width: "8%"
        },
        {
          title: "SKU编码",
          dataIndex: "code",
          key: "code",
          width: "8%"
        },
        {
          title: "商品编码",
          dataIndex: "product_code",
          key: "product_code",
          width: "8%"
        },
        {
          title: "SKU名称",
          dataIndex: "subject",
          key: "subject"
        },
        {
          title: "重量(kg)",
          dataIndex: "weight",
          key: "weight",
          width: "5%"
        },
        {
          title: "长(直径) × 宽 × 高(cm)",
          key: "volume",
          scopedSlots: { customRender: "volume" },
          width: "8%"
        },
        {
          title: "包装形态",
          dataIndex: "wrapping",
          key: "wrapping",
          scopedSlots: { customRender: "wrapping" },
          width: "5%"
        },
        {
          title: "特性",
          dataIndex: "characteristic",
          key: "characteristic",
          width: "8%"
        },
        {
          title: "规格属性",
          dataIndex: "specification",
          key: "specification",
          scopedSlots: { customRender: "specification" },
          width: "8%"
        },
        {
          title: "操作",
          key: "action",
          scopedSlots: { customRender: "action" },
          width: "150px"
        }
      ],
      data: [],
      loading: false,
      pagination: {
        defaultPageSize: 15
      },
      keyword: ""
    };
  },
  created() {
    this.fetchIndexData();
  },
  methods: {
    handleCreate() {
      this.$router.push("/dashboard/skus_create");
    },
    onSearch(value) {
      this.keyword = value;
      this.pagination.current = 1;
      this.fetchIndexData();
    },
    handleTableChange(pagination, filters, sorter) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;

      this.fetchIndexData({
        results: pagination.pageSize,
        page: pagination.current,
        sortField: sorter.field,
        sortOrder: sorter.order,
        ...filters
      });
    },
    fetchIndexData(params) {
      this.loading = true;

      if (this.keyword !== "") {
        params.keyword = this.keyword;
      }

      this.$axios
        .get(process.env.VUE_APP_BACKGROUND_API + "/api/sku", {
          params: params
        })
        .then(response => {
          const pagination = { ...this.pagination };
          pagination.total = response.data.total;
          this.pagination = pagination;

          this.data = response.data.data;

          this.loading = false;
        });
    },
    handleShow(id) {
      this.$router.push("/dashboard/skus/" + id);
    },
    handleDelete(id) {
      this.$axios
        .delete(process.env.VUE_APP_BACKGROUND_API + "/api/sku/" + id)
        .then(response => {
          this.$message.success(response.data.msg);
          this.fetchIndexData({ page: this.pagination.current });
        })
        .catch(error => {
          this.$message.error(error.response.data.msg);
        });
    }
  }
};
</script>
